// JavaScript Document
var MosaicEffects = 
{
	MozaicRect : function()
	{
		this.x = 0;
		this.y = 0;
		this.width = 10;
		this.height = 10;
		this.alpha = 1.0;
		this.delay = 0;
		
		// 면 체우기
		this.image;
		this.onComplete;
		this._rect;
		this.getRectShape = function()
		{
			if( this._rect == undefined )
			{
				this._rect 							= document.createElement( "div" );
				this._rect.style.position			= "absolute";
				this._rect.style.backgroundColor	= "#fff";
			}
			this._displayUpdate();
			return this._rect;
		}
		
		this._displayUpdate = function()
		{
			this._rect.style.top				= (this.y-1)+"px";
			this._rect.style.left				= (this.x-1)+"px";
			this._rect.style.width				= (this.width+2)+"px";
			this._rect.style.height				= (this.height+2)+"px";
			this._rect.style.opacity			= this.alpha;
		}
		
		this._render		= function()
		{
			if( this.delay <= 0 )
			{
				this.alpha -= 0.07;
			}else{
				this.delay -= 0.1;
			}
			
			// 완료 체크
			if( this.alpha <= 0.01 )
			{
				this.alpha = 0;
			}
			
			this._displayUpdate();
			
			if( this.alpha == 0 && this.onComplete != undefined )
			{
				// 완료 체크
				this.onComplete.apply( this );
				this.onComplete = null;
			}
		}
	} // function MozaicRect
	,
	addEffect : function( imageElement )
	{
		console.log( "imageElement size : "+imageElement.width+"/"+imageElement.height );
		var i, j, _numW, _numH, _sizeW, _sizeH, _rect;
		var _rects = [];
		var _imageX	= parseFloat( imageElement.offsetLeft );
		var _imageY	= parseFloat( imageElement.offsetTop );
		
		function onCompleteCanvasRect()
		{
			imageElement.parentNode.removeChild( this.getRectShape() );
			
			if( --_countCompleteRect == 0 )
			{
				console.log( "NSImageEffect . effect finish "+ _renderInterval );
				clearInterval( _renderInterval );
				_renderInterval = -1;
				
				while( _rects.length > 0 ) 
				{
					_rects.pop();
				}
			}
		}
		
		switch( Math.floor( Math.random()*3 ) )
		{
			case 0:
				// 모자이크효과
				_numW		= 8;
				_numH		= 4;
				_sizeW		= (imageElement.width/_numW);
				_sizeH		= (imageElement.height/_numH);
				for( i=0; i<_numH; i++ )
				{
					for( j=0; j<_numW; j++ )
					{
						_rect 			= new MosaicEffects.MozaicRect();
						_rect.x			= j*_sizeW + _imageX;
						_rect.y			= i*_sizeH + _imageY;
						_rect.width 	= _sizeW;
						_rect.height 	= _sizeH;
						_rect.delay		= Math.random()*3 + 1;
						_rect.image 	= imageElement;
						_rect.onComplete = onCompleteCanvasRect;
						imageElement.parentNode.appendChild( _rect.getRectShape() );
						
						_rects.push( _rect );
					}
				}
				break;
			case 1:
				// 세로 병풍 효과
				_numW		= 1;
				_numH		= 5;
				_sizeW		= (imageElement.width/_numW);
				_sizeH		= (imageElement.height/_numH);
				for( i=0; i<_numH; i++ )
				{
					_rect 			= new MosaicEffects.MozaicRect();
					_rect.x			= 0 + _imageX;
					_rect.y			= i*_sizeH + _imageY;
					_rect.width 	= _sizeW;
					_rect.height 	= _sizeH;
					_rect.delay		= i/2;
					_rect.image 	= imageElement;
					_rect.onComplete = onCompleteCanvasRect;
					imageElement.parentNode.appendChild( _rect.getRectShape() );
					
					_rects.push( _rect );
				}
				break;
			case 2:
				// 대각선 모자이크효과
				_numW		= 8;
				_numH		= 4;
				_sizeW		= (imageElement.width/_numW);
				_sizeH		= (imageElement.height/_numH);
				for( i=0; i<_numH; i++ )
				{
					for( j=0; j<_numW; j++ )
					{
						_rect 			= new MosaicEffects.MozaicRect();
						_rect.x			= j*_sizeW + _imageX;
						_rect.y			= i*_sizeH + _imageY;
						_rect.width 	= _sizeW;
						_rect.height 	= _sizeH;
						_rect.delay		= (i+j)/4;
						_rect.image 	= imageElement;
						_rect.onComplete = onCompleteCanvasRect;
						imageElement.parentNode.appendChild( _rect.getRectShape() );
						
						_rects.push( _rect );
					}
				}
				break;
		}
		
		var _countCompleteRect		= _rects.length;
		var _renderInterval;
		function onRender()
		{
			var _len = _rects.length;
			for( var i=0; i<_len; i++ )
			{
				if( _rects[i] != undefined )
					 _rects[i]._render();
			}
		}
		
		
		
		// 렌더링 시작
		_renderInterval = setInterval( onRender, 25 );
		console.log( "NSImageEffect . addEffect 's intervalID : "+_renderInterval );
		return _renderInterval;
	} // function addEffect()
}